<template>
    <div class="login-container">
        <h1 class="logo">家庭食谱管理系统</h1>
        <div class="from-content">
            <img
                src="../assets/1.png"
                style="margin-left: 100px; width: 300px"
            />
            <div class="login-view">
                <el-card header="用户名密码登录" class="login-card">
                    <el-form @submit.native.prevent="login">
                        <el-form-item label="用户名">
                            <el-input
                                type="text"
                                v-model="model.username"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input
                                type="password"
                                v-model="model.password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <!-- <p style="color:red;">* 测试用户名：admin     密码：123456</p> -->
                            <el-button type="primary" native-type="submit"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            model: {},
        };
    },
    methods: {
        async login() {
            const res = await this.$http.post("login", this.model);
            //将后台返回的token写入浏览器的存储，下次打开浏览器仍然存在 sessionStorage下次打开就没有
            localStorage.token = res.data.token;
            //清空浏览器保存的token 用localStorage.clear
            this.$router.push("/home");
            this.$message({
                type: "success",
                message: "登录成功",
            });
        },
    },
};
</script>
<style scoped>
.login-container {
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.login-card {
    width: 20rem;
}
.login-view {
    margin-right: 100px;
    text-align: center;
}
.login-view >>> .el-card__header {
    padding: 10px 20px;
}
.login-view >>> .el-card__body {
    padding: 15px;
}
.login-view >>> .el-form-item {
    margin-bottom: 15px;
}
.login-view >>> .el-button {
    width: 100%;
}
.from-content{
  margin-top: 100px;
  padding: 40px 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2cb5ad;
  
}
.logo{
  margin-left: 100px;
  padding-top: 100px;
  font-weight: normal;
}
</style>